feat(android): background-size, position and repeat styles by intergalacticspacehighway · Pull Request #52282 · react/react-native

intergalacticspacehighway · 2025-06-26T06:48:01Z

Summary:

This PR adds support for background size, position and repeat styles. It follows the CSS spec. Currently we default to background-origin: padding-box and background-clip : border-box to match the web's behavior. We can introduce these styles later. I have split the PR intro three parts for review. This PR includes android only changes. I wanted to introduce one style at a time, but CSS spec is such that size, position and repeat are intertwined.

Changelog:

[ANDROID][ADDED] - Background size, position and repeat styles.

Test Plan:

Merge the JS PR, rebuild android app and test RNTester app, it includes BackgroundImageExample. I have also added testcases for parsing syntax in JS.

Screen.Recording.2025-06-26.at.10.47.17.AM.mp4

null checks

intergalacticspacehighway · 2025-06-26T08:33:40Z

+    view: View,
+    backgroundRepeats: List<BackgroundRepeat>?
+  ): Unit {
+    if (ReactNativeFeatureFlags.enableNewBackgroundAndBorderDrawables()) {


Only enabled for new drawables as it is true by default now.

intergalacticspacehighway · 2025-06-26T08:35:22Z

  public companion object {
    @JvmStatic
-    public fun setFromDynamic(dynamic: Dynamic): LengthPercentage? {
+    public fun setFromDynamic(dynamic: Dynamic, allowNegative: Boolean = false): LengthPercentage? {


Did not like this change, but we need to support negative values for background-position. lmk if I should take some other approach!

I think this is fine.. I'll think about it a bit

facebook-github-bot · 2025-09-22T20:11:09Z

@jorge-cab has imported this pull request. If you are a Meta employee, you can view this in D82993837.

jorge-cab

Logic and functionality seem good! My main concern is that we are bloating BackgroundDrawable quite a bit with something that should realistically be a different layer.

I think this should just be another drawable BackgroundImageDrawable and should be set between the BackgroundDrawable and BorderDrawable in the CompositeBackgroundDrawable class.

Recently we just deleted CSSBackgroundDrawable which was combining both the Background and Border layers, which took an annoying amount of time so I would like to avoid that situation as much as possible.

Specially once we start looking into adding background-image which will require even more logic and integration with an Image pipeline

jorge-cab · 2025-09-23T16:17:17Z

+      canvas.save()
+      // 1. create a clipping path that matches the border radius.
+      val clipPath = Path()
+      val cornerRadii =


Using paths to draw is slower than using drawRoundRect or drawRect which is why before we only used paths when necessary. I think this should be something you can do here?

Overall I don't think we should remove the original code, just expand another conditional for when we have size/repeat/position set, but maybe I'm missing something

Simplified it a lot in last commits. We just need Path to clip the drawable. e.g. on background repeat: repeat we have to repeat gradients that go out of bounds, so need to clip them (on iOS we handle it using maskToBounds))

jorge-cab · 2025-09-23T16:34:29Z

+public enum class BackgroundSizeKeyword {
+  Cover,
+  Contain
+}


If I get this correctly we are no-oping on Cover and Contain since gradients don't use them, maybe we shouldn't create a class and complicate the logic to accomodate them?

That would also simplify BackgroundSize quite a bit and we can deal with this complexity once we actually need to implement it

Agree. Done.

jorge-cab · 2025-09-23T16:49:19Z

+  NoRepeat
+}
+
+public class BackgroundRepeat(


I think for this and most other classes you added we should make them private unless you have a clear reason to make them public

yeah, we need them in BackgroundStyleApplicator so need to keep them public i guess. I think most styles are public right now. e.g. OutlineStyle

jorge-cab · 2025-09-23T16:52:01Z

  public companion object {
    @JvmStatic
-    public fun setFromDynamic(dynamic: Dynamic): LengthPercentage? {
+    public fun setFromDynamic(dynamic: Dynamic, allowNegative: Boolean = false): LengthPercentage? {


I think this is fine.. I'll think about it a bit

jorge-cab · 2025-09-26T17:23:40Z

Position also looks off in Android but in a different way than iOS (#52283 (comment))
Android:

style={{
  width: 200,
  height: 200,
  experimental_backgroundImage:
    'linear-gradient(45deg, #ff6b6b 25%, transparent 25%, transparent 75%, #4ecdc4 75%)',
  experimental_backgroundRepeat: 'space',
  experimental_backgroundSize: '33.33px 66.67px',
  experimental_backgroundPosition: '16.5px 8.25px',
  backgroundColor: 'white',
  borderWidth: 2,
  borderColor: 'purple',
}}

Web:

  style="
      width: 200px;
      height: 200px;
      background-image: linear-gradient(
          45deg,
          #ff6b6b 25%,
          transparent 25%,
          transparent 75%,
          #4ecdc4 75%
      );
      background-repeat: space;
      background-size: 33.33px 66.67px;
      background-position: 16.5px 8.25px;
      background-color: white;
      border: 2px solid purple;
  "

intergalacticspacehighway · 2025-09-29T07:39:54Z

@jorge-cab thanks for catching the issue. There was rounding pixel error on android and iOS was accounting background position for repeat space styling. I have pushed fixes on iOS and Android, also added the above example in JS PR.

simulator_screenshot_282529FD-C365-437F-BD66-B56FB61E1F33

Background Image drawable

Makes a lot of sense. Just added Background Image drawable and cleaned up Background drawable. Maybe later we can rename Background drawable to Background color drawable.

jorge-cab

Clean! I'll have this go through internal review and will update here with any other requested changes. Thank you for working on this!

…react/uimanager/drawable/BackgroundImageDrawable.kt Co-authored-by: Jorge Cabiedes <57368278+jorge-cab@users.noreply.github.com>

intergalacticspacehighway · 2025-10-09T12:08:46Z

The e2e tests passes locally. Looks like a timeout failure maybe.

cortinico

Review automatically exported from Phabricator review in Meta.

meta-codesync · 2025-10-22T23:37:50Z

@jorge-cab has imported this pull request. If you are a Meta employee, you can view this in D82993837.

intergalacticspacehighway · 2025-10-23T04:24:05Z

@jorge-cab we need to run e2e after merging this PR with JS PR. I checked the e2e failing artifact. It has below error, it gets fixed when we add the JS changes. Also i tested radial/linear gradients on API level 24 emulator (with the JS changes). Seems to be working for me. lmk if i am missing something!

Summary: This PR adds support for background size, position and repeat styles. It follows the [CSS](https://www.w3.org/TR/css-backgrounds-3/#backgrounds) spec. Currently we default to `background-origin: padding-box` and `background-clip : border-box` to match the web's behavior. We can introduce these styles later. I have split the PR intro three parts for review. This PR includes JS parsing and style propagation to native changes. I wanted to introduce one style at a time, but CSS spec is such that size, position and repeat are intertwined. ## Changelog: [GENERAL][ADDED] - Background size, position and repeat styles. <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: [ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests Pull Request resolved: #52284 Test Plan: Merge the [iOS](#52283) and [android](#52282) PR into this, this PR includes `BackgroundImageExample`. I have also added testcases for parsing syntax in JS. https://github.com/user-attachments/assets/b7192fdf-52ba-4eb0-a1be-d47c72d87e92 Reviewed By: joevilches Differential Revision: D82973282 Pulled By: jorge-cab fbshipit-source-id: a94e33962c6708be963e1cac049da50d4764da64

meta-codesync · 2025-10-24T17:18:05Z

@jorge-cab merged this pull request in e859293.

android changes

9128da3

null checks

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jun 26, 2025

intergalacticspacehighway mentioned this pull request Jun 26, 2025

feat(JS): background-size, position and repeat styles #52284

Closed

facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Jun 26, 2025

intergalacticspacehighway commented Jun 26, 2025

View reviewed changes

cortinico added p: Expo Partner: Expo Partner labels Sep 10, 2025

jorge-cab requested changes Sep 23, 2025

View reviewed changes

intergalacticspacehighway added 4 commits September 29, 2025 09:35

merge main

00e2191

add background image drawable

d65e112

remove background size keyword

34c041c

Merge branch 'main' into feat/background-styles-android

bcf8e10

intergalacticspacehighway requested a review from jorge-cab September 29, 2025 07:40

nit cleanup

46772a0

jorge-cab reviewed Sep 30, 2025

View reviewed changes

Comment thread .../ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/BackgroundImageDrawable.kt Outdated

Comment thread .../ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/BackgroundImageDrawable.kt

intergalacticspacehighway and others added 2 commits October 1, 2025 04:24

Update packages/react-native/ReactAndroid/src/main/java/com/facebook/…

7c449aa

…react/uimanager/drawable/BackgroundImageDrawable.kt Co-authored-by: Jorge Cabiedes <57368278+jorge-cab@users.noreply.github.com>

Update packages/react-native/ReactAndroid/src/main/java/com/facebook/…

478dc99

…react/uimanager/drawable/BackgroundImageDrawable.kt Co-authored-by: Jorge Cabiedes <57368278+jorge-cab@users.noreply.github.com>

intergalacticspacehighway force-pushed the feat/background-styles-android branch from 7dbf040 to 478dc99 Compare September 30, 2025 23:00

intergalacticspacehighway added 3 commits October 1, 2025 04:31

move update path and canvas save call

a6f8253

add division by zero defence check for rounded values

0b8a3a3

Merge branch 'main' into feat/background-styles-android

540aa4f

cortinico requested changes Oct 17, 2025

View reviewed changes

meta-codesync Bot closed this in e859293 Oct 24, 2025

facebook-github-bot added the Merged This PR has been merged. label Oct 24, 2025

Conversation

intergalacticspacehighway commented Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Changelog:

Test Plan:

Uh oh!

intergalacticspacehighway Jun 26, 2025

Choose a reason for hiding this comment

Uh oh!

intergalacticspacehighway Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jorge-cab Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

facebook-github-bot commented Sep 22, 2025

Uh oh!

jorge-cab left a comment

Choose a reason for hiding this comment

Uh oh!

jorge-cab Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

intergalacticspacehighway Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jorge-cab Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

intergalacticspacehighway Sep 29, 2025

Choose a reason for hiding this comment

Uh oh!

jorge-cab Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

intergalacticspacehighway Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jorge-cab Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

jorge-cab commented Sep 26, 2025

Uh oh!

intergalacticspacehighway commented Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jorge-cab left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

intergalacticspacehighway commented Oct 9, 2025

Uh oh!

cortinico left a comment

Choose a reason for hiding this comment

Uh oh!

meta-codesync Bot commented Oct 22, 2025

Uh oh!

intergalacticspacehighway commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

meta-codesync Bot commented Oct 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

intergalacticspacehighway commented Jun 26, 2025 •

edited

Loading

intergalacticspacehighway Jun 26, 2025 •

edited

Loading

jorge-cab Sep 23, 2025 •

edited

Loading

intergalacticspacehighway Sep 29, 2025 •

edited

Loading

intergalacticspacehighway Sep 29, 2025 •

edited

Loading

intergalacticspacehighway commented Sep 29, 2025 •

edited

Loading

intergalacticspacehighway commented Oct 23, 2025 •

edited

Loading